<template>
    <div class = "addbaseone" v-loading = "loading">
        <el-container>
            <el-container>
            <el-main>
        <div class  = "Box-wrapper">
            <div style="padding-bottom:20px;" class = "title-wrapper">
                <el-breadcrumb separator="/">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "Home">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item>基地编辑</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-form ref="ruleForm" status-icon  :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="基地图片">
                <el-upload
                :action="this.IP"
                list-type="picture-card"
                :data="{type:'image'}"
                :limit="1"
                :file-list="images"
                :on-preview="handlePictureCardPreviewone"
                :on-remove="handleRemoveone"
                :on-success="handleAvatarSuccessone">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisibleone">
                <img width="100%" :src="imageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="首页缩略图">
                <el-upload
                :action="this.IP"
                list-type="picture-card"
                :limit="1"
                :file-list="imagesone"
                :data="{type:'image'}"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="名称"  prop = "name">
                <el-input v-model="ruleForm.name" placeholder = "基地名称"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop = "address">
                <el-input v-model="ruleForm.address" placeholder = "基地地址"></el-input>
            </el-form-item>
            <el-form-item label="容纳人数" prop = "capacity">
                <el-input v-model="ruleForm.capacity" placeholder = "容纳人数"></el-input>
            </el-form-item>
            <el-form-item label="开放时间" prop = "openDesc">
                <el-input v-model="ruleForm.openDesc" placeholder = "开放时间"></el-input>
            </el-form-item>
            <el-form-item label="联系方式"  prop = "phone">
                <el-input v-model="ruleForm.phone" placeholder = "联系方式"></el-input>
            </el-form-item>
            <el-form-item label="区域" prop = "addressCode">
                <el-select v-model="ruleForm.addressCode" placeholder="请选择区域">
                  <el-option
                    v-for="item in optionsone"
                    :key="item.addressCode"
                    :label="item.name"
                    :value="item.addressCode"
                   >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="经度"  prop = "longitude">
                <el-input v-model="ruleForm.longitude" placeholder = "经度"></el-input>
            </el-form-item>
            <el-form-item label="纬度"  prop = "latitude">
                <el-input v-model="ruleForm.latitude" placeholder = "纬度"></el-input>
            </el-form-item>
            <el-form-item label="价格"  prop = "price">
                <el-input v-model="ruleForm.price" placeholder = "价格"></el-input>
            </el-form-item>
            <el-form-item label="权重"  prop = "weight">
                <el-input type="number" v-model="ruleForm.weight" placeholder = "权重"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop = "desc">
                <el-select v-model="ruleForm.baseType" placeholder="请选择区域">
                  <el-option
                    v-for="item in options"
                    :key="item.desc"
                    :label="item.desc"
                    :value="item.name"
                   >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button v-if = "Boole===0" type="primary" @click="register('ruleForm')">提交</el-button>
                <el-button v-if = "Boole===1" type="primary" @click="registerone('ruleForm')">修改</el-button>
            </el-form-item>
            </el-form>
        </div>
            </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        
        // input验证模块
        var checkPhonetwo = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else {
           callback();
        }
      };
        var name = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('名称不能为空'));
        } else {
            callback();
        }
        };
        var address = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('地址不能为空'));
        } else {
            callback();
        }
        };
        var capacity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('容纳人数不能为空'));
        } else {
            callback();
        }
        };
        var time = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('开放时间不能为空'));
        } else {
            callback();
        }
        };
        var phone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('联系方式不能为空'));
        } else {
            callback();
        }
        };
        var longitude = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('经度不能为空'));
        } else {
            callback();
        }
        };
         var latitude = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('纬度不能为空'));
        } else {
            callback();
        }
        };
         var price = (rule, value, callback) => {
        if (value < 0) {
          return callback(new Error('价格不能为空'));
        } else {
            callback();
        }
        };
         var openDesc = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('开放时间不能为空'));
        } else {
            callback();
        }
        };
         var weight = (rule, value, callback) => {
        if (value < 0) {
          return callback(new Error('权重不能为空'));
        } else  {
            callback();
        }
        };
         var addressCode = (rule, value, callback) => {
        if (!value && value < 0) {
          return callback(new Error('请选择区域'));
        } else {
            callback();
        }
        };
         var baseType = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择基地类型'));
        } else {
            callback();
        }
        };
        return{
        loading:false,
        // 编辑表单
        data:{
            type:'image'
        },
        ruleForm: {
              longitude:'',
              latitude:'',
              name: '',
              addressCode:'',
              address: '',
              price:'',
              capacity: '',
              weight:'',
              openDesc:'',
              phone:'',
              baseType: '',
        },
        optionsone: [{
          addressCode: "331102",
          name: "莲都区"
        }, {
          addressCode: "331181",
          name: "龙泉市"
        }, {
            addressCode: "331121",
            name: "青田县"
        }, {
          addressCode: "331125",
            name: "云和县"
        },{
            addressCode: "331124",
            name: "松阳县"
        },{
            addressCode: "331122",
            name: "缙云县"  
        },{
            addressCode: "331123",
            name: "遂昌县"
        },{
            addressCode: "331126",
            name: "庆元县"
        },{
            addressCode: "331127",
            name: "景宁畲族自治县"
        }],
        imageUrl: '',
        dialogImageUrl: '',
        images:[],
        imagesone:[],
        dialogVisible: false,
        dialogVisibleone: false,
        options: [],
        Boole:null,
        // input验证模块
        rules: {
            name: [
                {validator: name, trigger: 'blur'}
            ],
            address: [
                {validator: address, trigger: 'blur'}
            ],
            capacity:[
                {validator: capacity, trigger: 'blur'}
            ],
            time:[
                {validator: time, trigger: 'blur'}
            ],
            phone:[
                {validator: phone, trigger: 'blur'}
            ],
            longitude:[
                {validator: longitude, trigger: 'blur'}
            ],
            latitude:[
                {validator: latitude, trigger: 'blur'}
            ],
            price:[
                {validator: price, trigger: 'blur'}
            ],
            openDesc:[
                {validator: openDesc, trigger: 'blur'}
            ],
            weight:[
                {validator: weight, trigger: 'blur'}
            ],
            addressCode:[
                {validator: addressCode, trigger: 'blur'}
            ],
            baseType:[
                {validator: baseType, trigger: 'blur'}
            ],
        },
        }
    },
    mounted() {
      this.List() 
    },
    methods:{
      //提示框组件
        open1(item,type,title) {
        this.$notify({
          title: title,
          message: item,
          type: type
        });
      },
      //提交
      register(formName){
          this.$refs[formName].validate((valid) => {
               if(this.imageUrl){
                if (valid) {
                this.loading = true
                let Add = {
                    longitude:this.ruleForm.longitude,
                    latitude:this.ruleForm.latitude,
                    type:this.ruleForm.baseType,
                    name: this.ruleForm.name,
                    addressCode:this.ruleForm.addressCode,
                    address: this.ruleForm.address,
                    price:this.ruleForm.price,
                    capacity: this.ruleForm.capacity,
                    weight:this.ruleForm.weight,
                    openDesc:this.ruleForm.openDesc,
                    phone:this.ruleForm.phone,
                    imgId:this.imageUrl,
                    thumbnail:this.dialogImageUrl
                    }   
          this.$api.Basetoaddordelete.baseadd(Add).then(res => {
              if(res.code == 200){
                this.$router.push({path:'Addbase',query:{radio1:'未上架'}})
                this.open1('新增成功','success','成功')  
              } else {
                this.open1('新增失败','warning','失败')  
              }
                this.loading = false
          })
            } else {
                console.log('error submit!!');
                return false;
              }
            } else {
                this.open1('请上传图片','warning','失败')
            }
            });
      },
        registerone(formName){
           this.$refs[formName].validate((valid) => {
               if(this.imageUrl){
                if (valid) {
                   this.loading = true
                   let Data = {
                    longitude:this.ruleForm.longitude,
                    latitude:this.ruleForm.latitude,
                    type:this.ruleForm.baseType,
                    name: this.ruleForm.name,
                    addressCode:this.ruleForm.addressCode,
                    address: this.ruleForm.address,
                    price:this.ruleForm.price,
                    capacity: this.ruleForm.capacity,
                    weight:this.ruleForm.weight,
                    openDesc:this.ruleForm.openDesc,
                    phone:this.ruleForm.phone,
                    imgId:this.imageUrl,
                    thumbnail:this.dialogImageUrl
                    }   
                    let baseId = this.$route.query.baseId
                    this.$api.Basetoaddordelete.basecompile(baseId,Data).then(res => {
                    if(res.code == 200){
                        this.$router.push(`Addbase?compile=${this.$route.query.compile}`)
                        this.open1('修改成功','success','成功')
                    } else {
                        this.open1('修改失败','success','失败')
                    }
                    this.loading = false
                }) 
              } else {
                console.log('error submit!!');
                return false;
              }
            } else {
                this.open1('请上传基地图片','warning','失败')
            }
            });
         },
        
        //图片上传
        
        handleAvatarSuccess(response, file, fileList){
            this.dialogImageUrl = file.response.data.id
        },
        handleRemove(file, fileList) {
            this.dialogImageUrl = ''
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleAvatarSuccessone(response, file, fileList){
            this.imageUrl = file.response.data.id
        },
        handleRemoveone(file, fileList) {
            this.imageUrl = ''
        },
        handlePictureCardPreviewone(file) {
            this.imageUrl = file.url;
            this.dialogVisibleone = true;
        },
    //获取基地信息与基地类型
    List(){
        this.loading = true
        let baseId = this.$route.query.baseId
        console.log(this.$route.query.baseId)
        if(baseId){
        this.Boole = 1
        this.$api.Basetoaddordelete.baseparticulars(baseId).then(res => {
          this.ruleForm = res.data
          if(res.data.imgUrl){
              this.images = [{url:res.data.imgUrl}]
              this.imageUrl = res.data.imgId
          }
          if(res.data.thumbnail){
              this.imagesone = [{url:res.data.thumbnailUrl}]
              this.dialogImageUrl = res.data.thumbnail
          }
        }).catch(err => {
          console.log(err)
        })
        } else {
            this.Boole = 0
        }
        this.$api.Basetoaddordelete.basetype().then(res => {
            this.options = res.data
            this.loading = false
        }).catch(err => {
            console.log(err)
        })
        this.loading = false
    },
    // goBack(){
    //     this.$router.push('/Addbase')
    // },
    Home(){
         this.$router.push(`Addbase?compile=${this.$route.query.compile}`)
     },
    }
}
</script>
<style scoped>
     .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

